<template>
	<view>
		<view class="top_bg ">
			<uNavbar title="藏品列表" :bgColor="backgroundColor"></uNavbar>
			<view class="search flex_dq" > 
				<view class="search_l flex_c" @click="isSwitch = !isSwitch">
					<text>{{values}}</text>
					<image src="../../static/icon/i_xial.png" mode="aspectFill"></image>
				</view>
				<view class="search_c flex_dq">
					<image src="../../static/icon/i_ss.png" mode="aspectFill"></image>
					<input type="text" placeholder="输入藏品名称" v-model.trim="search" @confirm="confirmSearch"/>
				</view>
				<text @click="confirmSearch">搜索</text>
				<view class="shuaixuan flex_Z" v-show="isSwitch">
					<text v-for="(item,index) in downList" :key="item.id" @click="isSelect(item)">{{item.name}}</text>
				</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view class="empty3"></view>
		<!-- #endif -->
		<!-- #ifdef APP -->
		<view class="empty3"></view>
		<view class="empty4"></view>
		<!-- #endif -->

		<!-- 藏品列表 -->
		<view class="collection flex_Z">
			<view class="NFT flex_ZC" v-for="(item,index) in collectionList" :key="index" @click="goDetails(item.id)">
					<image :src="item.goods_image" mode="aspectFill"></image>
					<text v-if="item.status != 1">{{item.status_desc}}</text>
					<text v-else > {{item.status_desc}} {{(item.start_time)}}</text>
					<view class="NFT_btm flex_dq">
						<view class="NFT_btm_l flex_dq">
							<image :src="item.brand_logo" mode=""></image>
							<text>{{item.brand_name}} </text>
						</view>
	
					</view>
					<view class="NFT_name flex_ld">
						<text>{{item.goods_name}}</text>
					</view>
					<view class="NFT_name flex_ld">
						<view class="NFT_btm_r flex_dq">
							<view class="sign flex_dq">
								<view class="sign_l flex_c">
									<text>系列</text>
								</view>
								<text>{{item.series_name}}</text>
							</view>
							<view class="sign flex_dq">
								<view class="sign_l flex_c">
									<text>限量</text>
								</view>
								<text>{{item.circulation == 0 ?'不限量':item.circulation + '份'}}</text>
							</view>
						</view>
						<view class="money flex_dq">
							<image src="../../static/icon/i_money.png" mode=""></image>
							<text>{{item.price}}</text>
						</view>
				 	</view>
			</view>
		</view>
		<!-- 暂无数据 / 加载更多 -->
		<noDatas :xxxList="collectionList" :status="status"></noDatas>

	</view>
</template>

<script>
	import {goodsList} from "../../api/store.js";
	export default {
		data() {
			return {
				search: '',
				choiceType:'create_time desc', //筛选方式
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				isSwitch: false,
				values: '最新上架',
				collectionList: [],
				backgroundColor: "transparent",
				downList: [
					{id:1,name:'最新上架',type:'create_time desc'},
					{id:2,name:'价格升序',type:'price asc'},
					{id:3,name:'价格降序',type:'price desc'},
				],
				avatar: 'https://pic.imgdb.cn/item/64f59dd7661c6c8e544cbc1a.jpg',

			}
		},
		// onLoad() {
		// 	this.initList()
		// },
		onShow() {
			this.initList()
			this.isSwitch = false
		},
		methods: {
			// 初始化
			initList() {
				let data = {
					brand_id:"",
					keywords:this.search,
					page:this.page,
					size:this.size,
					series_id:'',//系列id
					order_by:this.choiceType, //排序方式
					brand_id:'', //发行方
				};
				goodsList(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.collectionList = this.page == 1 ? list : this.collectionList.concat(list);
						console.log(this.collectionList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			// 下拉选择
			isSelect(e) {
				console.log(e.type);
				this.values = e.name
				this.choiceType = e.type
				this.isSwitch = false
				this.initList()
			},
			// 搜索
			confirmSearch(){
				this.isSwitch = false
				this.initList()
			},
			// 商品详情
			goDetails(id){
				console.log(id);
				uni.navigateTo({
					url:'/pagesMy/mallCenter/productDetails?id=' + id
				})
			},
			onPageScroll: function(e) {
				const scrollTop = e.scrollTop; // 获取页面滚动位置
				// 根据滚动位置修改状态栏样式
				if (scrollTop > 100) {
					this.backgroundColor = '#E0DDDA';
				} else {
					this.backgroundColor = 'transparent';
				}
				// console.log("滚动距离为：" + e.scrollTop);
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.page = 1,
				that.search = '',
				that.values = '最新上架',
				that.choiceType = 'create_time desc'
				that.collectionList = [],
				that.initList()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>

<style scoped>
	.top_bg {
		display: flex;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 300rpx;
	}

	.search {
		position: relative;
		width: 690rpx;
		height: 68rpx;
		margin: 20rpx auto;
		border: 1rpx solid #A68A64;
		border-radius: 40rpx;
	}

	.search>text {
		width: 142rpx;
		height: 68rpx;
		line-height: 68rpx;
		background: linear-gradient(274deg, #AB8E68, #D7BA93);
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #ffffff;
		text-align: center;
		margin-right: -2rpx;
	}

	.search_l {
		width: 24%;
		font-size: 24rpx;
		color: #666666;
	}

	.search_l>image {
		width: 24rpx;
		height: 14rpx;
		margin-left: 10rpx;
	}

	.sign {
		font-size: 22rpx;
		background: #ae9674;
		border-radius: 10rpx;
		color: #ffffff;
		padding-right: 20rpx;
		margin-right: 10rpx;
	}
	.sign_l {
		color: #ffffff;
		font-size: 22rpx;
		width: 60rpx;
		padding: 4rpx 0 6rpx 0;
		border-radius: 10rpx 0 0 10rpx;
		background: #997F5C;
	}

	.sign>text {
		margin-left: 10rpx;
		padding-bottom: 2rpx;
	}

	.search_c {
		width: 60%;
		border-left: 1rpx solid #E5E5E560;
	}

	.search_c>image {
		width: 32rpx;
		height: 32rpx;
		margin: 0 10rpx;
	}

	.search_c>input {
		color: #333333;
		font-size: 24rpx;
	}

	.shuaixuan {
		position: absolute;
		top: 64rpx;
		left: 0;
		width: 24%;
		margin-top: 4rpx;
		z-index: 999;
	}

	.shuaixuan>text {
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #ffffff;
		background: #B7A184;
		padding-left: 32rpx;
		border-bottom: 1rpx solid #ffffff30;
	}

	.NFT {
		position: relative;
		width: 690rpx;
		background: #B8A185;
		margin: 20rpx auto;
		border-radius: 40rpx;
		padding-bottom: 10rpx;
	}

	.NFT>image {
		width: 650rpx;
		height: 650rpx;
		margin-top: 20rpx;
		border-radius: 30rpx;
	}

	.NFT>text {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		height: 54rpx;
		line-height: 54rpx;
		background: #66553D;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
		padding: 0 10rpx;
		border-radius: 0 20rpx 0 0;
	}

	.NFT_btm {
		width: 100%;
		margin-top: 32rpx;
	}

	.NFT_btm_l {
		font-size: 32rpx;
		color: #ffffff;
		margin: 0 20rpx;
	}

	.NFT_btm_l>image {
		width: 52rpx;
		height: 52rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.NFT_name {
		width: 100%;
		color: #ffffff;
		font-size: 40rpx;
		margin-top: 10rpx;
	}

	.NFT_name>text:nth-child(1) {
		margin-left: 20rpx;
		text-overflow:ellipsis;
		display:-webkit-box;
		-webkit-box-orient:vertical; 
		-webkit-line-clamp:2; 
		overflow:hidden; 
	}
	.NFT_btm_r{
		margin-left: 20rpx;
	}

	.money {
		color: #ffffff;
		font-size: 44rpx;
		font-family: iconfont2;
		margin-right: 32rpx;
	}
	.money>image{
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
</style>